<template>
  <div id="main-container" class="w-full h-full bg-purple-500 p-4">
    <!-- 主容器 -->
    <div id="content-wrapper" class="m-auto max-w-[1200px]">
      <!-- 顶部内容 -->
      <a-row id="top-content-section" class="m-auto bg-white max-w-[1200px] p-4">
        <!-- 顶部内容区域 -->
        <a-col id="top-content-col" :span="24">
          <a-row id="main-content-row" :gutter="16" class="flex items-start">
            <!-- 主图 -->
            <a-col id="main-image-col" :span="9">
              <a-image id="main-product-image" src="https://picsum.photos/id/237/520/260" alt="产品主图" class="w-full h-auto" />
            </a-col>

            <!-- 文字内容 -->
            <a-col id="text-content-col" :span="14" class="ml-2">
              <a-typography-title id="main-title" :level="3" class="!text-[#7a73a3] !text-xl !mb-4">
                专业全能,飞傲FIIO串流解码一体机S15正式上市!
              </a-typography-title>

              <div id="subtitle-section">
                <a-typography-text
                  v-for="(_, index) in 2"
                  :key="index"
                  :id="`subtitle-${index + 1}`"
                  class="text-gray-500 text-sm mr-4 mb-5 inline-block"
                >
                  [专业全能,飞傲FIIO串流解码一体机S15正式上市!]
                </a-typography-text>
              </div>

              <!-- 资讯列表 -->
              <div id="info-list-section">
                <a-row v-for="(item, index) in list" :key="item.title" :id="`info-item-${index}`" class="mb-3">
                  <a-col :span="24">
                    <a-tag :id="`info-tag-${index}`" class="bg-gray-200 h-5 leading-5 text-center mr-2.5 mb-2.5">
                      {{ item.title }}
                    </a-tag>
                    <a-typography-text :id="`info-content-${index}`" class="text-sm">
                      {{ item.content }}
                    </a-typography-text>
                  </a-col>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </a-col>

        <!-- 底部图片区域 -->
        <a-col id="gallery-section" :span="24">
          <a-row id="gallery-row" :gutter="8">
            <a-col v-for="(_, index) in 2" :key="index" :span="12" :id="`gallery-col-${index}`">
              <img
                :id="`gallery-image-${index}`"
                src="https://picsum.photos/id/237/520/260"
                alt="产品图"
                class="w-[580px] h-[100px] object-cover"
              />
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
  
<script setup lang="jsx">
import { Card as ACard, Row as ARow, Col as ACol, Image as AImage, Typography as ATypography, Tag as ATag } from 'ant-design-vue';

const { Title: ATypographyTitle, Text: ATypographyText } = ATypography;

const list = ref([
  {
    title: '资讯',
    content: '专业全能,飞傲FIIO串流解码一体机S15正式上市!',
  },
  {
    title: '资讯1',
    content: '专业全能,飞傲FIIO串流解码一体机S15正式上市!',
  },
  {
    title: '资讯2222',
    content: '专业全能,飞傲FIIO串流解码一体机S15正式上市!',
  },
  {
    title: '资讯333',
    content: '专业全能,飞傲FIIO串流解码一体机S15正式上市!',
  },
]); // 保持原数据不变

const tabs = ['最近更新', '台式耳机系统', '随身耳机系统', '音响系统', '音乐与唱片', '无线耳机与音响'];
const links = ['家电论坛', '天龙音响', '耳机.中国-安润公司', '家电联盟', 'PCHome音频频道', 'NUXUS', 'Silent Angel'];
</script>

<style></style>